<template>
  <div id="">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="录播课程" name="first">
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="title"
            label="课程名称"
          >
          </el-table-column>
          <el-table-column
            prop="periodName"
            label="学习内容"
           >
          </el-table-column>
          <el-table-column
            prop="gmtCreate"
            label="学习时间">
          </el-table-column>
        </el-table>

            <div style="float: right">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[2, 4, 10, 20]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    name: "LearningRecord",
    data() {
      return {
        activeName: 'first',
        tableData:[],
          current:1,
          size:10,
          total:1,
          userId: ''
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      findAll(){
        let uid =sessionStorage.getItem("uid");
        this.$axios2.post("student/stu/user-study/findAll",qs.stringify({userId:uid,current:this.current,size:this.size,})).then(res=>{
          this.tableData=res.data.records;
         this.total= res.data.total;
         this.current=res.data.current;
         this.size=res.data.size;
          console.log(this.tableData);
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.size = val;
        this.findAll();

      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.current = val;
        this.findAll();
      },
    }, created(){
      this.findAll();
    }
  }
</script>

<style scoped>
  ul{
    padding: 0;
  }
  li{
    height: 140px;
    border-bottom: 1px solid lightgray;
    list-style: none;
  }
  #bigDiv{
    width: 100%;
    border: 1px solid #EBEEF5;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    padding-top: 5px;
  }
  #PayBtn{
    width: 78px;
    height: 32px;
    border: 1px solid orange;
    border-radius: 5px;
    background: white;
    color: orange;
  }
  #CancelPay{
    width: 78px;
    height: 32px;
    border: 0;
    border-radius: 5px;
    color: gray;
    margin-top: 5px;
  }
  .details{
    float: left;
    font-size: 15px;
    margin-left: 4%;
    width:8%;
  }
  .messageHead{
    float: left;
    margin-left: 30px;
    color: gray;
  }
</style>
